<template>
  <div class="app-container">
    <loan-management-card></loan-management-card>
    <el-card style="margin-top: 20px;">
      <el-form :model="searchForm" size="mini" :inline="true">
        <div>
          <el-form-item label="产品名称：">
            <el-input
              style="width: 200px;"
              v-model="searchForm.productName"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="申请企业：">
            <el-input
              style="width: 200px;"
              clearable
              v-model="searchForm.companyName"
              placeholder="请输入纳税人识别号"
            ></el-input>
          </el-form-item>
          <el-form-item label="申请人：">
            <el-input
              style="width: 200px;"
              clearable
              v-model="searchForm.name"
              placeholder="请输入申请人"
            ></el-input>
          </el-form-item>
          <el-form-item label="客户管理：">
            <el-select
              style="width: 200px;"
              clearable
              v-model="searchForm.customerId"
              placeholder="请选择客户管理"
            >
              <el-option
                v-for="item in customerList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="所属省份：">
            <el-select
            style="width: 200px;"
              v-model="searchForm.provinceId"
              placeholder="请选择所属省份"
            >
              <el-option
                v-for="item in provinceList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="申请时间：" prop="startTime">
              <el-date-picker
                style="width: 200px"
                v-model="searchForm.beginTime"
                align="right"
                type="date"
                placeholder="选择开始日期"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd"
                format="yyyy 年 MM 月 dd 日"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>-</el-form-item>
            <el-form-item>
              <el-date-picker
                v-model="searchForm.endTime"
                align="right"
                type="date"
                placeholder="选择结束日期"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd"
                format="yyyy 年 MM 月 dd 日"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-refresh" @click="resetList">重置</el-button>
              <el-button icon="el-icon-search" type="primary" @click="getlist('searchForm')"
                >查询</el-button
              >
            </el-form-item>
        </div>
      </el-form>

      <div style="display: flex;">
        <router-link :to="{ path: '/salesManagement/creatLoanManagement' }">
          <el-button size="mini" type="primary" icon="el-icon-plus"
            >手动添加订单</el-button
          >
        </router-link>
        <el-button
          style="margin-left: 10px"
          size="mini"
          icon="el-icon-delete"
          @click="deleteMany()"
          >批量删除</el-button
        >
      </div>

    </el-card>
  </div>
</template>

<script>
import loanManagementCard from "../components/loanManagementCard.vue";
import { pickerOptions } from "@/views/product/options.js";
export default {
  components: {
    loanManagementCard
  },
  data() {
    return {
      pickerOptions,
      customerList: [],
      provinceList: [],
      searchForm: {
        productName: "",
        companyName: "",
        name: "",
        adminId: "",
        priviceId: "",
        beginTime: "",
        endTime: "",
        pageNum: 1,
        pageSize: 10
      }
    };
  },
  methods: {
    deleteMany() {},
    resetList() {},
    getList() {
      
    },
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 50px);
  background-color: #f5f5f5;
  position: relative;
}
</style>
